<template>
<div id="out14">
    <div id="top2">
		<a href="#/GerenZhongxing"><img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
		<span>全部订单</span>
		<div>编辑</div>
	</div>
	<div class="back"></div>
	<div class="btnS">
		<div class="btns">
			<a>全部订单</a>
			<a href="#/DauZhifu">待支付</a>
			<a href="#/DaiFahuo" class="activee">代发货</a>
			<a href="#/DaiShouhuo">待收货</a>
			<a href="#/JiaoYiwan">交易完成</a>
		</div>
	</div>
	<a href="#/WuLiuxx">
	<div class="dingdan">
		订单编号：1485269676465
		<span>待发货</span>
	</div>
	</a>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				$("#out14 .btns>a").click(function(){
					$(this).addClass("activee").siblings().removeClass("activee");
				});
				$("#out14>#top2>div").click(function(){
					$(this).parent().parent().siblings().find(".duihaoo").css("display","block");
					$(this).parent().parent().siblings().find(".bot").css("display","block");
				});
				$("#out14").siblings().find(".duihaoo").attr("check",false);
				
				$(".duihaoo").click(function(){
					if ($(this).attr("check")=="false") {
						$(this).attr("check",true);
					} else if($(this).attr("check")=="true"){
						$(this).attr("check",false);
					};
					duiHao();
				});
				$("#out14").siblings().find(".bot>span").click(function(){
					if ($(this).parent().siblings().find(".duihaoo").attr("check")=="true") {
						$(this).parent().siblings().remove();
					};
				});
				function duiHao(){
				    for (var i = 0; i < $("#out14").siblings().find(".duihaoo").length; i++) {
				        if ($("#out14").siblings().find(".duihaoo").eq(i).attr("check")=="false") {
				        	    $("#out14").siblings().find(".duihaoo").eq(i).css("filter","grayscale(100%)");
				        } else if($("#out14").siblings().find(".duihaoo").eq(i).attr("check")=="true"){
				        	    $("#out14").siblings().find(".duihaoo").eq(i).css("filter","none");
				        }
				    }	
				};
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out14>.back{
		height: 9.6rem;
	}
	#out14 a{
		color: black;
		text-decoration: none;
	}
	#out14>#top2 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-around;
		position: fixed;
		z-index: 10;
		padding-left: 3rem;
		box-sizing: border-box;
	}
	#out14>#top2>div{
		font-size: 3rem;
		color: #FFFFFF;
	}
	#out14 #imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#out14 #top2>span {
		width: 55rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
		box-sizing: border-box;
		text-align: center;
		padding-right: 1rem;
	}
	#out14>.btnS{
		width: 100vw;
		height: 8rem;
		overflow: scroll;
		position: relative;
	}
	#out14>.btnS>.btns{
		width: 115vw;
		height: 8rem;
		font-size: 3rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #FFFFFF;
		position: absolute;
	}
	#out14>.btnS>.btns>a{
		height: 5rem;
		line-height: 5rem;
	}
	#out14 .dingdan{
		font-size: 2.8rem;
		padding: 2rem;
		background: #FFFFFF;
		padding-left: 3rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	#out14 .dingdan>span{
		float: right;
		color: #e53e42;
	}
	#out14>.btnS>.btns>.activee{
		border-bottom: 0.2rem solid #FF0000;
		color: #FF0000;
	}
</style>